<template>
    <div class="report-sw">
        <swiper :options="swiperOption" ref="swiper">
            <swiper-slide>
                <report-one @getInfo="getInfo"></report-one>
            </swiper-slide>
            <swiper-slide>
                <report-two></report-two>
            </swiper-slide>
            <swiper-slide>
                <report-three></report-three>
            </swiper-slide>
            <swiper-slide>
                <report-four></report-four>
            </swiper-slide>
            <swiper-slide>
               <report-five v-if="style===1||style===3"></report-five>
               <report-wenzong v-if="style===2"></report-wenzong>
            </swiper-slide>
        </swiper> 
    </div>
</template>
<script>
// import { swiper, swiperSlide } from 'vue-awesome-swiper' 
import ReportOne from './ReportOne.vue'
import ReportTwo from './ReportTwo.vue'
import ReportThree from './ReportThree.vue'
import ReportFour from './ReportFour.vue'
import ReportFive from './ReportFive.vue'
import ReportWenzong from './ReportWenzong.vue'

import util from '../../lib/util'
export default {
    components:{
        // swiper,
        // swiperSlide,

        ReportOne,
        ReportTwo,
        ReportThree,
        ReportFour,
        ReportFive,
        ReportWenzong
    },
    data(){
        return{
             swiperOption:{

                slidesPerView :1,
                // autoplay:5000,
                direction:'vertical',

                autoHeight:true,
             },
             reportId:'',
             sysCode:'',
             style:''
        }
    },
    created(){

    },
    mounted(){
        this.initSwiper()
    },
    watch:{

    },
    methods:{
        getInfo(data){
            this.style=data.style
        },
        initSwiper(){
             let swiper =this.$refs.swiper.swiper
            //  console.log(swiper)
             var startScroll, touchStart, touchCurrent;  
             swiper.slides.on('touchstart', function (e) {    
                 startScroll = this.scrollTop;    
                 touchStart = e.targetTouches[0].pageY;}, 
                 true);
            swiper.slides.on('touchmove', function (e) {      
                touchCurrent = e.targetTouches[0].pageY;    
                var touchesDiff = touchCurrent - touchStart;    
                var slide = this;    
                var onlyScrolling =            
                ( slide.scrollHeight > slide.offsetHeight ) && //allow only when slide is scrollable            
                (                ( touchesDiff < 0 && startScroll === 0 ) || //start from top edge to scroll bottom                
                ( touchesDiff > 0 && startScroll === ( slide.scrollHeight - slide.offsetHeight ) ) || //start from bottom edge to scroll top  
                ( startScroll > 0 && startScroll < ( slide.scrollHeight - slide.offsetHeight ) ) //start from the middle            
                );    
                if (onlyScrolling) {        
                    e.stopPropagation();    
                }
            }, true);

        }
        
    }
}
</script>
<style lang="less" scoped>
.list-swi{
    height:100%;

}

</style>
<style lang="less">
.report-sw{
    height:100%;
}
.swiper-container {
  width: 100%;
  height: 100%;
}
.swiper-wrapper{
    height:100% !important;
}
.swiper-slide {
  background: #edf5ff;
  height:100%;
    // background:
    overflow: auto;
    -webkit-overflow-scrolling: touch; 
}
</style>


